<template>
  <div>
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import { reqCategoryList, reqFloorList, reqSwiperList } from '../../api/home'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'VTest',
  methods: {
    async proxyData() {
      // const data = await request.get('/api/product/getBaseCategoryList')
      const data1 = await reqCategoryList()
      const data2 = await reqFloorList()
      const data3 = await reqSwiperList()
      console.log(data1.data)
      console.log('楼层', data2)
      console.log('轮播图', data3)
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      // 轮播图配置对象
      swiperOption: {
        // 同一个页面展示几个轮播图
        slidesPerView: 1,
        // 轮播图之间的距离
        spaceBetween: 30,
        // 是否循环播放
        loop: true,
        // 分页配置项小圆点
        pagination: {
          // 分页容器
          el: '.swiper-pagination',
          // 小圆点是否可点
          clickable: true
          // 当前被激活的小圆点类型
          // bulletActiveClass: 'my-bullet-active'
        },
        // 导航按钮（左箭头、右箭头）
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 是否自动播放
        autoplay: {
          // 轮播间隔
          delay: 2500
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.swiper {
  height: 200px;
}
</style>
